UI 화면 디버깅하기

HandStack UI의 특징

• HandStack 기반 UI 화면은 서버 코드에 의존하지 않는 표준 HTML, CSS, JavaScript로 구성됩니다.
• 업무에 따라 UI 화면 개발을 위해 다양한 상용소스와 오픈소스 기반에서 동작하는 화면을 개발하게 됩니다.
• 도메인에 맞게 조정된 syn.loader.js 에서 화면에 필요한 스크립트만 선택적으로 사용 가능합니다.
• UI 디버깅을 위해 업계 표준 도구인 Chrome DevTools 사용을 권장합니다.

크롬 개발자 도구 (Chrome DevTools)

Chrome DevTools는 Google Chrome 브라우저에 내장된 웹 개발 필수 도구입니다.

• 웹 페이지를 실시간으로 편집하고 문제를 빠르게 진단
• 더 나은 웹사이트를 더 빠르게 구축하도록 지원
• 실시간 소스 코드 편집기 기능 제공

운영 체제에 따라 실행 단축키가 달라집니다. F12

• Windows/Linux: Shift + CTRL + J
• macOS: Option + ⌘ + J

Chrome DevTools 주요 패널 소개

• Elements 패널: DOM과 CSS를 자유롭게 조작하여 사이트의 레이아웃과 디자인을 정의합니다.

• Console 패널: 개발 중 진단 정보를 남기고, 페이지의 JavaScript와 상호작용합니다.

• Sources 패널: 브레이크포인트를 사용해 JavaScript를 디버깅하거나, DevTools를 코드 에디터로 사용합니다.

  • HandStack에서는 Node.js Function 디버깅에도 활용됩니다.

• Network 패널: 클라이언트-서버 간 요청 문제를 디버깅하고, 페이지 로딩 성능을 최적화합니다.

• Application 패널: 스토리지, 쿠키, 캐시, 폰트, 이미지 등 로딩된 모든 리소스를 검사합니다.

Elements 패널

Elements PanelDOM과 CSS를 자유롭게 조작하여 사이트의 레이아웃과 디자인을 정의합니다.

• 페이지 검사 및 조정
• 스타일 수정
• DOM 수정
• 애니메이션 검사

Console 패널

Console Panel 개발 중 진단 정보를 남기고 페이지의 자바스크립트와 상호작용한 결과를 출력합니다.

• Console 사용하기
• 커맨드 라인으로 상호작용하기

Sources 패널

Sources 에서 브레이크 포인트를 사용해 자바스크립트를 디버깅하거나 Workspace를 로컬파일에 연결하여 DevTools를 코드 에디터로 사용할 수 있습니다.

HandStack에서는 Node.js Function 디버깅에서도 Chrome DevTools를 사용합니다.

• 자바스크립트 디버깅 시작하기
• 브레이크 포인트를 사용한 디버깅
• DevTools Workspace로 지속성 설정
• 모든 페이지에서 코드 스니펫 실행

Network 패널

클라이언트 서버 간의 요청 관련 문제의 디버깅과 페이지 로딩 성능을 최적화에 사용합니다.

• 시작하기
• 네트워크 이슈 가이드
• Network 패널 참조

Application 패널

로컬 및 세션 스토리지, 쿠키, 어플리케이션 캐시, 이미지, 폰트, 스타일시트를 포함한 로딩된 모든 리소스를 검사합니다.

• 스토리지, 데이터베이스, 캐시 관리 및 검사
• 쿠키 삭제 및 검사

여러 iframe에서 컨텍스트 포커스 얻기

iframe을 사용하는 UI에서 특정 iframe 내부를 디버깅해야 할 때가 있습니다.

• 해결 방법
  • Elements 탭의 요소 선택 버튼 (Shift + CTRL + C)을 클릭합니다.
  • 디버깅하려는 iframe 내의 요소를 선택합니다.
  • Console의 실행 컨텍스트가 해당 iframe으로 변경됩니다.

콘솔에서 jQuery Selector 사용

Chrome DevTools 콘솔은 DOM 요소를 쉽게 선택할 수 있는 단축 명령어를 제공합니다.

• $(SELECTOR)

  • document.querySelector와 동일하게, 셀렉터에 해당하는 첫 번째 요소를 반환합니다.
  • 예: $('#myId'), $('.myClass')

• $$(SELECTOR)

  • document.querySelectorAll과 동일하게, 셀렉터에 해당하는 모든 요소를 배열로 반환합니다.

// 예시: ID가 'saveButton'인 버튼 요소 가져오기
const saveButton = $('#saveButton');

// 예시: 클래스가 'item'인 모든 요소 가져오기
const allItems = $$('.item');

DOM 요소의 Event Listener 확인하기

특정 DOM 요소에 어떤 이벤트 리스너가 연결되어 있는지 확인할 수 있습니다.

• getEventListeners()
  • Elements 탭에서 DOM 요소를 선택한 후, 콘솔에 입력합니다.
  • 해당 요소에 연결된 모든 이벤트 리스너를 객체 형태로 반환합니다.

// Elements 탭에서 확인하고 싶은 버튼을 선택한 상태라고 가정
getEventListeners($('#myButton'))

// 반환된 객체에서 특정 이벤트(예: click)의 리스너 함수 확인
// getEventListeners($('#myButton')).click[0].listener

이벤트 실시간 모니터링

특정 DOM 요소에서 발생하는 이벤트를 실시간으로 콘솔에 기록합니다.

• monitorEvents() / unmonitorEvents()
  • 디버깅 중 이벤트 발생 순서나 빈도를 파악할 때 유용합니다.
  • 주의: 성능 저하를 유발할 수 있으므로, 사용 후에는 반드시 unmonitorEvents()로 중지해야 합니다.

// #myButton에서 발생하는 모든 이벤트를 모니터링
monitorEvents($('#myButton'));

// 'click'과 'mouseover' 이벤트만 모니터링
monitorEvents($('#myButton'), ['click', 'mouseover']);

// 모니터링 중지
unmonitorEvents($('#myButton'));

브레이크포인트 실시간으로 걸기

소스 코드를 직접 수정하지 않고, 함수 이름만으로 브레이크포인트를 설정할 수 있습니다. 운영 환경 등 소스 원본이 없을 때 매우 유용합니다.

• debug(함수명)

  • 해당 함수가 호출되는 시점에 실행이 멈추고 Sources 패널로 전환됩니다.

• undebug(함수명)

  • 설정했던 브레이크포인트를 해제합니다.

// 'calculateTotal' 함수가 호출될 때 디버거를 실행
debug(calculateTotal);

// 디버깅 완료 후 브레이크포인트 해제
undebug(calculateTotal);

함수 호출 매개변수 출력

console.log를 코드에 추가하지 않고도, 함수가 호출될 때 전달되는 매개변수를 콘솔에서 실시간으로 확인할 수 있습니다.

• monitor(함수명)

  • 해당 함수가 호출될 때마다, 전달된 인수(arguments)를 콘솔에 출력합니다.

• unmonitor(함수명)

  • 설정했던 매개변수 출력을 중지합니다.

// 'fetchData' 함수가 호출될 때마다 인수를 콘솔에 출력
monitor(fetchData);

// 모니터링 중지
unmonitor(fetchData);

DevTools를 실시간 코드 에디터로 (Workspace)

DevTools를 단순 디버거가 아닌, 실시간 코드 에디터로 활용할 수 있습니다.

• Workspace란?
  • 로컬 프로젝트 폴더를 DevTools의 Sources 패널에 직접 연결하는 기능입니다.
  • 브라우저에서 수정한 내용(CSS, JS)이 즉시 로컬 파일에 저장됩니다.
  • 에디터와 브라우저를 오가는 비효율을 줄여 개발 속도를 크게 향상시킵니다.

Workspace 설정 방법

1. Sources 패널의 왼쪽 Filesystem 탭을 선택합니다.
2. + Add folder to workspace를 클릭하여 로컬 프로젝트 폴더(예: wwwroot)를 추가합니다.
3. 브라우저 상단에 표시되는 접근 권한을 허용합니다.
4. 로컬 파일(예: app.css)을 우클릭하여 Map to network resource...를 선택, 현재 페이지에 로드된 파일과 연결합니다.
5. 파일 아이콘 옆에 녹색 점(●)이 표시되면 성공적으로 연결된 것입니다.

이제 Elements 패널에서 스타일을 변경하거나 Sources 패널에서 직접 코드를 수정하면, 실제 파일에 변경사항이 즉시 반영됩니다.

요약 정리 및 Q&A

• 콘솔창 지우기: clear() 또는 단축키 Ctrl + L

이러한 팁들을 활용하여 HandStack UI 개발 생산성을 높일 수 있습니다.